<template>
    <div class="container">
      <div class="left-pane" @dragover.prevent>
        <draggable v-model="images" :options="dragOptions" class="image-list">
          <div v-for="(image, index) in images" :key="index" draggable @dragstart="dragStart(image, index)">
            <img class="img-str" :src="image.src" alt="Image">
          </div>
        </draggable>
      </div>
      <div class="right-pane" @dragover.prevent @drop="dropHandler">
        <!-- <div v-for="(group, index) in imageGroups" :key="index">
          <div v-for="(imgIndex, img) in group" :key="imgIndex">
            <img :src="images[imgIndex].src" alt="Image" style="width: 100px; height: 100px;">
          </div>
          <hr>
        </div> -->
      </div>
    </div>
  </template>
  
  <script>
  import draggable from 'vuedraggable';
  
  export default {
    components: {
      draggable,
    },
    data() {
      return {
        images: [
        { id: 1, src: 'https://c.53326.com/d/file/newpc202302/b0ci1sfofpz.jpg' },
        { id: 2, src: 'https://c.53326.com/d/file/newpc202302/ehkmdl33jtq.jpg' },
        { id: 3, src: 'https://c.53326.com/d/file/newpc202302/erieljwp13b.jpg' },
        { id: 4, src: 'https://c.53326.com/d/file/newpc202302/rdja5dckqvw.jpg' },
        { id: 5, src: 'https://c.53326.com/d/file/newpc202302/fyhj0ibovbp.jpg' },
        ],
        dragOptions: {
          animation: 150,
        },
        imageGroups: [],
      };
    },
    methods: {
      dragStart(image, index) {
        event.dataTransfer.setData('text/plain', JSON.stringify({ image, index }));
      },
      dropHandler(event) {
        event.preventDefault();
        const { image, index } = JSON.parse(event.dataTransfer.getData('text/plain'));
        this.handleDropOnRight(image, index);
      },
      handleDropOnRight(image, index) {
        let groupIndex = -1;
        for (let i = 0; i < this.imageGroups.length; i++) {
          const lastImageIndex = this.imageGroups[i][this.imageGroups[i].length - 1];
          if (lastImageIndex === index - 1) {
            groupIndex = i;
            break;
          }
        }
  
        if (groupIndex === -1 || groupIndex === this.imageGroups.length - 1) {
          this.imageGroups.push([index]);
        } else {
          this.imageGroups[groupIndex].push(index);
        }
      },
    },
  };
  </script>
  
  <style scoped>
  .img-str {
    display: block;
    width: 200px;
    height: 100px;
  }
  .container {
    display: flex;
    height: 800px;
  }
  
  .left-pane {
    width: 200px;
    height: 100%;
    border: 1px solid #ccc;
  }
  
  .right-pane {
    width: 800px;
    height: 100%;
    border: 1px solid #ccc;
  }
  
  .image-list {
    padding: 10px;
  }
  
  .image-list div {
    margin-bottom: 10px;
    cursor: move;
  }
  </style>